<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          href="javascript:;"
          v-for="p in subFilter.brands"
          :key="p.id"
          @click="changeBrand(p.id)"
          :class="{ active: p.id === subFilter.selectedBrand }"
          >{{ p.name }}</a
        >
      </div>
    </div>
    <div class="item" v-for="item in subFilter.saleProperties" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a
          href="javascript:;"
          v-for="prop in item.properties"
          :key="prop.id"
          @click="changeProp(item, prop.id)"
          :class="{ active: prop.id === item.selectedProp }"
          >{{ prop.name }}</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { computed, inject, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'SubFilter',
  setup(props, { emit }) {
    const route = useRoute()
    const filterLoading = ref(false)
    const subFilter = inject('subFilter')
    console.log(subFilter, 'subFilter')
    // 监听二级类目ID的变化获取筛选数据
    watch(
      () => route.params.id,
      (newVal) => {
        // 变化后的ID有值 且 处在二级类名路由下
        if (newVal && `/category/sub/${newVal}` === route.path) {
          filterLoading.value = true
          subFilter.value.selectedBrand = null
          subFilter.value.brands.unshift({ id: null, name: '全部' })
          subFilter.value.saleProperties.forEach((item) => {
            item.selectedProp = null
            item.properties.unshift({ id: null, name: '全部' })
          })
          // 设置修改的数据
          filterLoading.value = false
        }
      },
      { immediate: true }
    )
    // 获取筛选参数的函数
    const getFilterParams = () => {
      const obj = { brandId: null, attrs: [] }
      // 品牌
      obj.brandId = subFilter.value.selectedBrand
      // 销售属性
      subFilter.value.saleProperties.forEach((item) => {
        if (item.selectedProp) {
          const prop = item.properties.find(
            (prop) => prop.id === item.selectedProp
          )
          obj.attrs.push({ groupName: item.name, propertyName: prop.name })
        }
      })
      //  参考数据：{brandId:'',attrs:[{groupName:'',propertyName:''},...]}
      if (obj.attrs.length === 0) obj.attrs = null
      return obj
    }
    // 记录当前选择的品牌
    const changeBrand = (brandId) => {
      if (subFilter.value.selectedBrand === brandId) return
      subFilter.value.selectedBrand = brandId
      emit('filter-change', getFilterParams())
    }
    // 记录选择的销售属性
    const changeProp = (item, propId) => {
      if (item.selectedProp === propId) return
      item.selectedProp = propId
      emit('filter-change', getFilterParams())
    }
    // 获取父组件的数据
    // 筛选区的列表数据其实包含两部分：品牌数据 + 销售规格
    const list = computed(() => {
      return [
        // 品牌数据-参考销售规格的格式组装数据
        {
          id: 'brands',
          name: '品牌',
          properties: subFilter.value.brands
        },
        // 销售规格-已这个格式为主要
        ...subFilter.value.saleProperties
      ]
    })
    return { list, changeProp, changeBrand, subFilter, filterLoading }
  }
}
</script>
<style scoped lang="less">
// 筛选区
.sub-filter {
  background-color: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 30px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @color;
        }
      }
    }
  }
}
</style>
